<template>
  <div class="progressbar">
    <progress percent="60" color="#234356" active />
    <p> {{year}}已经过去了{{days}}天, {{percent}}% </p>

  </div>
</template>

<script>

export default {
  methods: {
    isLeapYear() {
      const year = new Date().getFullYear();
      if (year % 400) {
        return true;
      } else if (year % 4 === 0 && year % 100 !== 0) {
        return true;
      }
      return false;
    },
    getDayOfYear() {
      return this.isLeapYear() ? 366 : 365;
    },
  },
  computed: {
    year() {
      return new Date().getFullYear();
    },
    days() {
      const start = new Date();
      start.setMonth(0);
      start.setDate(1);
      // start为今年的第一天，用现在时间戳减去start的时间戳
      const offset = new Date().getTime() - start.getTime();
      return parseInt(offset / 1000 / 60 / 60 / 24, 10) + 1;
    },
    percent() {
      return ((this.days * 100) / this.getDayOfYear()).toFixed(1);
    },
  },
};
</script>

<style lang='scss'>
.progressbar {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 40px;
  width: 100%;
  progress {
    margin-bottom: 10px;
  }
}
</style>
